import 'package:flutter/material.dart';
import 'package:proste_indexed_stack/proste_indexed_stack.dart';
import 'home/home_page.dart';
import 'class/page/classroom_page.dart';
import 'collect/page/collect_page.dart';
import 'me/page/me_page.dart';
import 'store/page/store_page.dart';

const Map<String, String> _bottomNames = {
  'tab_icon_cookbook': '首页',
  'tab_icon_course': '课堂',
  'tab_icon_mall': '商城',
  'tab_icon_favo': '收藏夹',
  'tab_icon_mine': '我的',
};

class TabbarPage extends StatefulWidget {
  const TabbarPage({Key? key}) : super(key: key);

  @override
  _TabbarPageState createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage> with SingleTickerProviderStateMixin {
  int _currentIndex = 0; //当前索引
  final List<BottomNavigationBarItem> bottomTabs = [];
  final List<IndexedStackChild> tabBodies = [
    IndexedStackChild(child: HomePage()),
    IndexedStackChild(child: ClassRoomPage()),
    IndexedStackChild(child: StorePage()),
    IndexedStackChild(child: CollectPage()),
    IndexedStackChild(child: MeCenterPage()),
  ];

  void _onTabCilck(int index) {
    // 获取当前点击index,切换
    setState(() {
      _currentIndex = index;
    });
  }

  BottomNavigationBarItem _bottomNavigationBarItem(String key, String value) {
    return BottomNavigationBarItem(
      icon: Image.asset(
        'assets/images/tabbar/${key}.png',
        width: 22,
        height: 22,
      ),
      activeIcon: Image.asset(
        'assets/images/tabbar/${key}_active.png',
        width: 22,
        height: 22,
      ),
      label: value,
      tooltip: '',
    );
  }

  @override
  void initState() {
    super.initState();
    _bottomNames.forEach((key, value) {
      bottomTabs.add(_bottomNavigationBarItem(key, value));
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          //ios 的 tabbar
          type: BottomNavigationBarType.fixed, //tabbar点击风格
          fixedColor: Colors.black, //被点击后的颜色
          unselectedItemColor: Colors.black45,
          selectedFontSize: 12,
          unselectedFontSize: 12,
          onTap: _onTabCilck,
          currentIndex: _currentIndex, //当前点击的是哪个
          items: bottomTabs, //类似于ios的TabbarItem,这里需要一个[List]
        ),
        body: ProsteIndexedStack(
          index: _currentIndex,
          children: tabBodies,
        ), //viewControllers,
        //*当触发onTap,根据_currentIndex 来动态切换，我把他们放在了一个List
      ),
    );
  }
}
